<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8"/>
    <meta content="yes" name="apple-mobile-web-app-capable">
    <meta content="yes" name="apple-touch-fullscreen">
    <meta content="telephone=no,email=no" name="format-detection">
    <title>2017年度成绩单-时事一点通</title>
    <link href="../../../../static/dist/css/lib/animate.min.css" rel="stylesheet"
          th:href="@{/dist/css/lib/animate.min.css}"/>
    <link href="../../../../static/dist/css/lib/swiper.min.css" rel="stylesheet"
          th:href="@{/dist/css/lib/swiper.min.css}"/>
    <link href="../../../../static/2017score/css/index.css" rel="stylesheet" th:href="@{/2017score/css/index.css}"/>
    <link rel="stylesheet" href="//apps.bdimg.com/libs/jqueryui/1.10.4/css/jquery-ui.min.css">

    <script src="../../../../static/dist/js/lib/flexible.js" th:src="@{/dist/js/lib/flexible.js}"></script>
    <script src="../../../../static/dist/js/lib/flexible_css.js" th:src="@{/dist/js/lib/flexible_css.js}"></script>
    <script src="../../../../static/dist/js/lib/swiper.min.js" th:src="@{/dist/js/lib/swiper.min.js}"></script>
    <script src="../../../../static/dist/js/lib/swiper.animate.min.js"
            th:src="@{/dist/js/lib/swiper.animate.min.js}"></script>

</head>
<body class="main">
<!-- <h1>我的2017年度报告</h1> -->
<!--/*@thymesVar id="userId" type="java.lang.String"*/-->
<input id="userId" type="hidden" th:value="${userId}">
<div id="loading">
    <span class="cloud animated rubberBand infinite"></span>
</div>
<img id="music" class="rotation" src="../../../../static/2017score/img/music.png" th:src="@{/2017score/img/music.png}"/>
<audio id="music_play_filter" controls="controls" loop="loop" autoplay="autoplay" style="display: none;">
    <source src="../../../../static/2017score/other/bgm.mp3" th:src="@{/2017score/other/bgm.mp3}" type="audio/mpeg"/>
</audio>
<div class="swiper-container">
    <div class="swiper-wrapper">
        <section id="p1" class="swiper-slide">
            <img id="p1title" class="ani" src="../../../../static/2017score/img/p1title.png"
                 th:src="@{/2017score/img/p1title.png}" swiper-animate-effect="fadeInDown"
                 swiper-animate-duration="0.6s" swiper-animate-delay="1s">
            <img id="p1s1" class="animated pulse infinite" src="../../../../static/2017score/img/p1s1.png"
                 th:src="@{/2017score/img/p1s1.png}"></img>
            <img id="p1dog" class="ani" src="../../../../static/2017score/img/p1dog.png"
                 th:src="@{/2017score/img/p1dog.png}" swiper-animate-effect="bounceIn" swiper-animate-duration="2s"
                 swiper-animate-delay="1.5s">
            <p id="p1t1" class="ani" swiper-animate-effect="fadeInLeft" swiper-animate-duration="0.8s"
               swiper-animate-delay="1.8s">时事一点通祝大家</p>
            <p id="p1t2" class="ani" swiper-animate-effect="fadeInRight" swiper-animate-duration="0.8s"
               swiper-animate-delay="2.4s">2018狗年<em>旺旺</em></p>
            <img id="p1open" class="ani" src="../../../../static/2017score/img/p1open.png"
                 th:src="@{/2017score/img/p1open.png}" swiper-animate-effect="fadeInUp" swiper-animate-duration="0.5s"
                 swiper-animate-delay="3s">
            <img id="p1cloud" class="ani" src="../../../../static/2017score/img/cloud.png"
                 th:src="@{/2017score/img/cloud.png}" swiper-animate-effect="fadeInLeft" swiper-animate-duration="0.5s"
                 swiper-animate-delay="3s">
            <img id="p1cloud2" class="ani" src="../../../../static/2017score/img/cloud2.png"
                 th:src="@{/2017score/img/cloud2.png}" swiper-animate-effect="fadeInRight"
                 swiper-animate-duration="0.5s" swiper-animate-delay="3s">
        </section>
        <section class="swiper-slide" id="p2">
            <div class="p2text ani" swiper-animate-effect="fadeInDown" swiper-animate-duration="0.8s"
                 swiper-animate-delay="0.5s">
                <p class="p2text-label"><img src="../../../../static/2017score/img/p2s2.png"
                                             th:src="@{/2017score/img/p2s2.png}"> 2017年您在时事一点通总共作答了</p>
                <p class="p2text-data"><em>2222</em>题</p>
            </div>
            <div class="p2text ani" swiper-animate-effect="fadeInDown" swiper-animate-duration="0.8s"
                 swiper-animate-delay="2.2s">
                <p class="p2text-label"><img src="../../../../static/2017score/img/p2s2.png"
                                             th:src="@{/2017score/img/p2s2.png}"> 答对题数</p>
                <p class="p2text-data"><em>222</em>题</p>
            </div>
            <div class="p2text ani" swiper-animate-effect="fadeInDown" swiper-animate-duration="0.8s"
                 swiper-animate-delay="4.2s">
                <p class="p2text-label"><img src="../../../../static/2017score/img/p2s2.png"
                                             th:src="@{/2017score/img/p2s2.png}"> 您在 <em>2017年10月27日</em> 这天很努力，答题最多</p>
                <p class="p2text-data"><em>222</em>题</p>
            </div>

            <img id="p2t1" class="ani" src="../../../../static/2017score/img/p2t1.png"
                 th:src="@{/2017score/img/p2t1.png}" swiper-animate-effect="fadeInUp" swiper-animate-duration="0.8s"
                 swiper-animate-delay="5s">
            <img id="p2next" class="ani" src="../../../../static/2017score/img/next.png"
                 th:src="@{/2017score/img/next.png}" swiper-animate-effect="fadeInDown" swiper-animate-duration="1s"
                 swiper-animate-delay="5.5s">

            <img id="p2dog" class="ani" src="../../../../static/2017score/img/p2dog.png"
                 th:src="@{/2017score/img/p2dog.png}" swiper-animate-effect="bounceInUp" swiper-animate-duration="0.8s"
                 swiper-animate-delay="0.1s">
            <img id="p2cloud" class="ani" src="../../../../static/2017score/img/cloud.png"
                 th:src="@{/2017score/img/cloud.png}" swiper-animate-effect="fadeInLeft" swiper-animate-duration="0.5s"
                 swiper-animate-delay="0s">
            <img id="p2s1" class="animated pulse infinite" src="../../../../static/2017score/img/p2s1.png"
                 th:src="@{/2017score/img/p2s1.png}">
        </section>
        <section class="swiper-slide" id="p3">
            <div class="p3text ani" swiper-animate-effect="fadeInDown" swiper-animate-duration="0.8s"
                 swiper-animate-delay="1.5s">
                <p class="p3text-label"><img src="../../../../static/2017score/img/p2s2.png"
                                             th:src="@{/2017score/img/p2s2.png}"> 2017年度时事答题平均正确率为</p>
                <p class="p3text-data"><em>70.46</em>%</p>
            </div>
            <div class="p3text ani" swiper-animate-effect="fadeInDown" swiper-animate-duration="0.8s"
                 swiper-animate-delay="3.5s">
                <p class="p3text-label"><img src="../../../../static/2017score/img/p2s2.png"
                                             th:src="@{/2017score/img/p2s2.png}"> 您的答题正确率为</p>
                <p class="p3text-data"><em>80.00</em>%</p>
            </div>
            <div class="p3text ani" swiper-animate-effect="fadeInDown" swiper-animate-duration="0.8s"
                 swiper-animate-delay="5.5s">
                <p class="p3text-label"><img src="../../../../static/2017score/img/p2s2.png"
                                             th:src="@{/2017score/img/p2s2.png}"> 您的排名</p>
                <p class="p3text-data"><em>4000</em>名</p>
            </div>

            <img id="p3t1" class="ani" src="../../../../static/2017score/img/p3t1.png"
                 th:src="@{/2017score/img/p3t1.png}" swiper-animate-effect="fadeInDown" swiper-animate-duration="0.8s"
                 swiper-animate-delay="0.5s">

            <img id="p3next" class="ani" src="../../../../static/2017score/img/next.png"
                 th:src="@{/2017score/img/next.png}" swiper-animate-effect="fadeInDown" swiper-animate-duration="1s"
                 swiper-animate-delay="6s">

            <img id="p2dog" class="ani" src="../../../../static/2017score/img/p2dog.png"
                 th:src="@{/2017score/img/p2dog.png}" swiper-animate-effect="bounceInUp" swiper-animate-duration="0.8s"
                 swiper-animate-delay="0.1s">
            <img id="p2cloud" class="ani" src="../../../../static/2017score/img/cloud.png"
                 th:src="@{/2017score/img/cloud.png}" swiper-animate-effect="fadeInLeft" swiper-animate-duration="0.5s"
                 swiper-animate-delay="0s">
            <img id="p2s1" class="animated pulse infinite" src="../../../../static/2017score/img/p2s1.png"
                 th:src="@{/2017score/img/p2s1.png}">
        </section>
        <section class="swiper-slide" id="p4">
            <div class="" id="award">
            </div>
            <p id="p4name" class="ani" swiper-animate-effect="fadeInLeft" swiper-animate-duration="0.5s"
               swiper-animate-delay="0.5s"><em>刘必钦</em>同学</p>
            <div id="p4level" class="ani" src="" swiper-animate-effect="fadeInUp" swiper-animate-duration="0.8s"
                 swiper-animate-delay="1s"></div>
            <img id="p4s1" class="ani" src="../../../../static/2017score/img/p4s1.png"
                 th:src="@{/2017score/img/p4s1.png}" swiper-animate-effect="zoomIn" swiper-animate-duration="0.5s"
                 swiper-animate-delay="2s">
            <img id="p4share" class="ani" data-clipboard-text="" src="../../../../static/2017score/img/p4share.png"
                 th:src="@{/2017score/img/p4share.png}" swiper-animate-effect="bounceInUp" swiper-animate-duration="1s"
                 swiper-animate-delay="2.5s">
            <a id="p4Open" class="ani" href="http://sj.qq.com/myapp/detail.htm?apkName=com.huashitong.ssydt"
               swiper-animate-effect="bounceInUp" swiper-animate-duration="1s" swiper-animate-delay="2.5s"></a>
        </section>
    </div>
</div>
<script src="../../../../static/dist/js/lib/jquery.min.js" th:src="@{/dist/js/lib/jquery.min.js}"></script>
<script src="//apps.bdimg.com/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
<script src="../../../../static/dist/js/lib/clipboard.min.js" th:src="@{/dist/js/lib/clipboard.min.js}"></script>
<script type="text/javascript">
    var shareCpTxt = '2017年度成绩单-时事一点通' + window.location.href;// 剪贴板分享文案
    // app分享文案
    var shareTit = '2017年度成绩单-时事一点通';// 标题
    var shareDesc = '';// 描述
    var sharePic = 'http://img.huashitong.net/2018/02/08/1518071287807x4bgN.png';// 图片地址

    var UA = navigator.userAgent.toLowerCase();

    // 非APP打开显示打开app
    if (UA.indexOf('ssydt') == -1) {
        $('#p4share').hide();
    } else {
        $('#p4Open').hide();
    }
    // 版本判断，提供不同分享方式
    if (isNew('3.4.0')) {
        $('#p4share').on('click', function () {
            var str = '{"method":"common.share", "params":{"title":"' + shareTit + '", "desc":"' + shareDesc + '", "pic":"' + sharePic + '"}}';
            doAction(str);
        });
    } else {
        if (/android/i.test(UA)) {
            $('#p4share').attr('data-clipboard-text', shareCpTxt);
            new Clipboard('#p4share');
            $('#p4share').on('click', function () {
                alert('复制到剪贴板啦，快去粘贴分享吧~。');
            });
        } else {
            $('#p4share').attr('data-clipboard-text', shareCpTxt);
            new Clipboard('#p4share');
            $('#p4share').on('click', function () {
                $("#dialog-message").dialog({
                    modal: true,
                    height: 500,
                    width: 660,
                    dialogClass: "no-close",
                    buttons: {
                        '确定': function () {
                            $(this).dialog("close");
                        }
                    }
                });
            });

            $.ajax({
                type: 'GET',
                url: 'http://api.t.sina.com.cn/short_url/shorten.json?source=3518960105&url_long=' + window.location.href,//source为新浪appkey，最好用自己的
                dataType: 'JSONP',
                json: 'callback',
                data: {},
                success: function (r) {
                    shareCpTxt = '2017年度成绩单-时事一点通' + r[0].url_short; //生成的短链接
                    $('#p4share').attr('data-clipboard-text', shareCpTxt);
                    new Clipboard('#p4share');
                    $('#p4share').on('click', function () {
                        $("#dialog-message").dialog({
                            modal: true,
                            height: 500,
                            width: 660,
                            dialogClass: "no-close",
                            buttons: {
                                '确定': function () {
                                    $(this).dialog("close");
                                }
                            }
                        });
                    });
                }
            });
        }
    }

    // 音乐
    var audio;
    window.onload = function () {
        function audioAutoPlay(id) {
            audio = document.getElementById(id);
            audio.play();
            document.addEventListener("WeixinJSBridgeReady", function () {
                audio.play();
            }, false);
            document.addEventListener('YixinJSBridgeReady', function () {
                audio.play();
            }, false);
        }

        audioAutoPlay('music_play_filter');

    }
    $('#music').on('click', function () {
        if (audio.paused) {
            audio.play();
            $(this).addClass('rotation');
        } else {
            audio.pause();
            $(this).removeClass('rotation');
        }
    });

    // 动画
    var mySwiper = new Swiper('.swiper-container', {
        direction: 'vertical',
        mousewheel: true,
        on: {
            init: function () {
                swiperAnimateCache(this);
                swiperAnimate(this);
            },
            imagesReady: function () {
                $.ajax({
                    type: "get",
                    url: "/api/common/year-score/" + $('#userId').val(),
                    success: function (data) {
                        loadData(data.results);
                        setTimeout(function () {
                            $('#loading').fadeOut(500);
                        }, 300);
                    }
                })
            },
            slideChangeTransitionEnd: function () {
                $('#p1dog').attr('class', 'ani');
                $('#p1open').attr('class', 'ani');

                $('#p2next, #p3next, #p4share').attr('class', 'ani');

                swiperAnimate(this);
            }
        }
    })

    // 默认动画结束后添加动画
    $('#p1dog').on('animationend', function () {
        $(this).attr('class', 'ani').addClass('animated pulse infinite');
    });
    $('#p1open, #p2next, #p3next, #p4share').on('animationend', function () {
        $(this).attr('class', 'ani').addClass('animated bounce infinite');
    });
    // 
    $('#p1open').on('click', function () {
        mySwiper.slideNext();
    });

    function loadData(data) {
        var date = data.bestDate.replace(/(\d{4})-(\d{2})-(\d{2})/g, '$1年$2月$3日');
        // p2
        $('#p2 .p2text-data').eq(0).find('em').text(data.questionNumber);
        $('#p2 .p2text-data').eq(1).find('em').text(data.correctNumber);
        $('#p2 .p2text-label').eq(2).find('em').text(date);
        $('#p2 .p2text-data').eq(2).find('em').text(data.bestNumber);
        // p3
        $('#p3 .p3text-data').eq(1).find('em').text((data.myCorrectRate * 100).toFixed(2));
        $('#p3 .p3text-data').eq(2).find('em').text(data.ranking);
        // p4
        $('#p4name em').text(data.nickname);
        if (data.myCorrectRate >= 0.9) {
            var level = 1;
        } else if (data.myCorrectRate >= 0.8) {
            var level = 2;
        } else if (data.myCorrectRate >= 0.7) {
            var level = 3;
        } else if (data.myCorrectRate >= 0.6) {
            var level = 4;
        } else if (data.myCorrectRate >= 0) {
            var level = 5;
        }
        rankShow(level);
    }

    function rankShow(level) {
        switch (level) {
            case 1:
                $('#p4level').addClass('level1');
                shareDesc = "既然选择了远方，便只顾风雨兼程！根据过去一年的表现，时事一点通为你颁布三好生称号（班级里的鹤鸣之士）";
                break;
            case 2:
                $('#p4level').addClass('level2');
                shareDesc = "不为模糊不清的未来担忧，只为清清楚楚的现在努力！根据过去一年的表现，时事一点通为你颁布优等生称号（班级里的志士仁人）";
                break;
            case 3:
                $('#p4level').addClass('level3');
                shareDesc = "不经一番寒彻骨，怎得梅花扑鼻香？根据过去一年的表现，时事一点通为你颁布尖子生称号（班级里的常胜将军）";
                break;
            case 4:
                $('#p4level').addClass('level4');
                shareDesc = "努力不一定会成功，但是不努力一定很轻松！根据过去一年的表现，时事一点通为你颁布中等生称号（班级里的中流砥柱）";
                break;
            case 5:
                $('#p4level').addClass('level5');
                shareDesc = "有时候你不努力，就不会知道什么叫绝望！根据过去一年的表现，时事一点通为你颁布掉队生称号(班级里的潜在黑马)";
                break;
        }
    }


    /* 版本判断 */
    function isNew(newV) {
        if (UA.indexOf('ssydt') == -1) {
            return false;
        } else {
            var _ver = UA.substr(UA.indexOf('ssydt') + 5);
            if (_ver > newV) {
                return true;
            } else {
                return false;
            }
        }
    }

    // appJS
    function doAction(str) {
        if (/android/i.test(UA)) {
            //调用安卓
            var action = androidjs.doAction(str);
        }
        if (/ipad|iphone|mac/i.test(UA)) {
            //调用iOS方法
            window.webkit.messageHandlers.appPostManager.postMessage(str);
            /*window.android.startFunction(this.str);*/
        }
    }
</script>
<div id="dialog-message" title="确认对话框" style="display: none;">
    <p>复制到剪贴板啦，快去粘贴分享吧~。</p>
</div>
</body>
</html>